<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html {
            margin: 0;
            padding: 0;
        }
        #div {
            width: 600px;
            height: 2000px;
            background-color: #fafafa;
            margin: 0 auto;
            border: 1px solid #333;
            overflow: scroll;
        }
        .head {
            line-height: 50px;
            text-align: center;
            background-color: forestgreen;
        }
        .float {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        #fixed {
            position: fixed;
            top: 50px;
            background-color: #ccc;
        }
        .float-padding {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="div">
        <div class="head">顶部</div>
        <div class="float" id="fixed">要浮动到顶部的</div>
        <div class="float float-padding"></div>
        <div class="cont">
            <ol>
                <li>1是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>2是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>3是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>4是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>5是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>6是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
                <li>7是劳动法了时代峻峰快啦水电费啦按键砥砺奋进阿领导发的</li>
            </ol>
        </div>
    </div>
</body>
<script>
    window.onscroll = e =>  {
        // console.log(window.scrollY)
        let h = 50 - window.scrollY;
        h = h < 0 ? 0 : h;
        fixed.style.top = h + 'px';
    }
</script>
</html>